<template>
  <div class="before-media-publish">
    <form class="upload-hint" ref="form">
      <div class="top">
        <div class="icon"><!-- 特么为啥两个地方图标圆角不一样，设计有毒=。= --></div>
        <label for="bmpFileInput" v-show="!uploading" class="button upload-button">
            {{uploading?'上传中，请稍候':'上传音频'}}
        </label>
        <input id="bmpFileInput" v-show="!uploading" type="file" name="file" class="hidden-file-input" @change="uploadFileChange" >
        <label v-show="uploading" class="button upload-button">{{uploading?'上传中，请稍候':'上传音频'}}</label>
      </div>
      <div class="bot">
        <p>1、支持mp3|wma|wav|ogg|ape|acc视频格式，大小不超过2G，较大的视频请压缩后上传；</p>
        <p>2、禁止发布涉及政治敏感、黄色暴力、血腥恐怖等视频。</p>
      </div>
    </form>
  </div>
</template>

<script>
import {postMedia} from 'utils/api.js';
import Tools from 'utils/tools.js';

export default {
  name: 'audio',
  data(){
    return {
      uploading: false
    }
  },
  methods: {
    async uploadFileChange(e) {
      let fileName = e.target.value;
      let fileSize = 0;
      let lastModified = 0;
      if (!(/\.(mp3|wma|wav|ogg|ape|acc)$/ig).test(fileName)) {
        this.$store.dispatch('alert', "文件必须为音频！");
        return false;
      }
      if (e.target.files) {
        let file = e.target.files[0];
        // if (!(/video/).test(file.type)) {
        //   this.$store.dispatch('alert',"文件必须为视频！");
        //   return false;
        // }
        if(file.size>2*1024*1024*1024){
          this.$store.dispatch('alert', "文件尺寸超过2G，请压缩后再试~");
          return false;
        }
        fileName = file.name;
        fileSize = file.size;
        lastModified = file.lastModified
      }
      let userId = Tools.cookie.getItem('S_INFO').split('|')[0];
      let fakeMd5 = fileSize + lastModified + fileName + userId;
      //为IE9单独加个时间戳
      if(!window.FormData){
        fakeMd5+=(new Date()).getTime()
      }
      let request;
      let before = (req)=> {
        request = req;
        if(uploader){
          this.$store.dispatch('audioBeginUpload', {uploader, request});
        }
      };
      let uploader = await postMedia('uploadAudio', this.$refs.form, {
        before,
        query: {md5: Tools.md5(fakeMd5)},
        progress: this.setProgress,
        credentials: true,
        name:'file'
      });
      this.uploading = true;
      this.$store.dispatch('audioBeginUpload', {uploader, request});
    },
    setProgress(e){
      this.$store.dispatch('mediaSetUploadProgress', e.loaded * 100 / e.total);
    }
  },
  mounted() {
    this.input = this.$el.querySelector('.hidden-file-input');
  }
};
</script>

<style lang="less">
  .upload-hint {
    margin-top: 54px;
    margin-left: 255px;
    .top {
      position: relative;
    }
    .icon {
      width: 154px;
      height: 146px;
      margin-left: 34px;
      background: url(../../../../../assets/upload_video.png) center center no-repeat;
      display: inline-block;
    }
    .upload-button {
      cursor: pointer;
      display: inline-block;
      width: 144px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 4px;
      background: #2e9057;
      color: #fff;
      position: absolute;
      left: 220px;
      top: 41px;
      transition: .25s;
      &:hover{
        background: #4da672;
      }
      &:active{
        transition: .1s;
        background: #2e9057;
      }
    }
    .bot {
      margin-top: 23px;
      font-size: 12px;
      color:#999;
      line-height: 22px;
    }
  }
</style>